<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box{
        width: 200px;
        height: 100px;
        background-color: aqua;
    }
    #sp{
        background-color: antiquewhite;
    }
</style>
<body>
    <div id="box">我是div
        <span id="sp">我是span</span>
    </div>
    <script>
        var sp = document.getElementById("sp");
        var box = document.getElementById("box");
        
        /**
         * 事件的冒泡（Bubble）
         *      所谓的冒泡指的就是事件的向上传到，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
         *      在开发中大部分情况下冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡
         * 
         * 
        */

        sp.onclick = function(a){

            //取消冒泡
            a.cancelBubble = true;
            console.log("span事件");
        }

        box.onclick = function(a){
            console.log("box盒子");
            a.cancelBubble = true;
        }

        document.body.onclick = function(){
            console.log("body事件");
        }
    </script>
</body>
</html>